<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				background: skyblue;
				/*
				 盒子内容通过宽高设置
				 * */
				width: 100px;
				height: 100px;
				/*
				 
				 * 盒子的内边距
				 * */
				padding: 10px 20px 30px 40px;/*顺时针*/
				padding: 10px 20px 30px;/*上10、左右20、下30*/
				padding: 20px 20px;
				/*上下20，左右20*/
				padding: 10px/*都是10px*/;
				
				border: solid 10px;
				/*
				 	盒子模型的外边距(边框以外的空隙)
				 * */
				margin: 5px 10px 15px 20px;
				/*
				 box-sizing:border-box;
				 默认centent-box
				 
				 padding会挤压内容
				 所以要算好padding和内容的大小。
				 * */
				
				
			}
		</style>
	</head>
	<body>
		<div class="box">哈哈</div>
	</body>
</html>
